<template>
	<el-container id="index">
		<el-aside :width="collapse?'64px':'200px'">
			<menubar></menubar>
		</el-aside>
		<el-container>
			<el-header class="header usn">
				<el-row>
					<tagsview class="mytagsview"></tagsview>
				</el-row>
				<el-breadcrumb v-if="$route.path!='/dashboard'" separator-class="el-icon-arrow-right" class="breadcrumb">
					<el-breadcrumb-item v-for="item in tags" :key="item.path" :to="item.to">{{item.text}}
					</el-breadcrumb-item>
				</el-breadcrumb>
			</el-header>
			<el-scrollbar style="height: 100%;">
				<div id="main">
					<div class="main-content">
							<transition name="el-fade-in" mode="out-in" duration="100">
						<keep-alive :include="needCache">
								<router-view></router-view>
						</keep-alive>
							</transition>
					</div>
				</div>
			</el-scrollbar>
		</el-container>
	</el-container>
</template>

<script>
	import menubar from './Menubar.vue'
	import tagsview from '@/components/common/tagsView.vue'
	export default {
		methods: {
			scrollEvent(e) {
				this.$store.commit("set_scroll", e)
			}
		},
		components: {
			menubar,
			tagsview
		},
		mounted() {
			let dom = this.$el.querySelector('.el-scrollbar__wrap')
			if (dom) {
				dom.addEventListener("scroll", e => {
					this.scrollEvent({
						scrollTop: dom.scrollTop
					})
				})
			} else {
				console.log("不是预期值")
			}
		},
		computed: {
			collapse() {
				return this.$store.state.collapse
			},
			tags() {
				return this.$route.meta.tab
			},
			needCache() {
				return this.$store.state.tagsView.needCache
			},
			version(){
				return process.env.VUE_APP_VERSION||'未知版本'
			}
		}
	}
</script>

<style lang="scss">
	#index {
		height: 100%;
		overflow: hidden;

		.el-aside {
			-ms-overflow-style: none;
			/* IE10 */
			scrollbar-width: none;
			/* Firefox */
		}

		//消除滚动条
		.el-aside::-webkit-scrollbar {
			display: none;
		}

		.el-scrollbar__wrap {
			overflow-x: hidden;
		}

		.header {
			padding: 0;
			display: flex;
			height: unset !important;
			flex-direction: column;

			.mytagsview {
				flex: 1;
			}

			.breadcrumb {
				padding: 0 20px 20px;
				border-bottom: 1px solid #E4E7ED;
			}
		}
	}
</style>
